

<div class="container_wrapper account_orderDetail_default" id="account_orderDetail">

    <h1 class="title">{{lang.account.orders_detail.title}}</h1>
    <!-- content -->

    <div class="order-header">
      <div class="order-header-status">
        <span class="mo-tag">{{account_order_detail.financial_status_name | upcase}}</span>
      </div>
      <div class="order-header-ID">{{account_order_detail.order_number}}</div>
      <div class="order-header-date format-date" data-date="{{account_order_detail.created_at}}" data-format="YYYY-mm-dd HH:MM:SS">{{account_order_detail.created_at  | date: "%Y-%m-%d %H:%M:%S"}}</div>
      {% if account_order_detail.pay_button_show %}
      {% unless isTemplate %}
      <div class="order-header-cancel" data-id="{{account_order_detail.order_number}}">{{lang.account.orders_detail.cancel_order}}</div>
      {% endunless %}
      {% endif %}

    </div>
    <div class="plugin-container-header"></div>

    {% comment %} <!-- 订单关联客服 --> {% endcomment %}
    {% if account_order_detail.admin_info %}
    <div class="order_linked_servie order_detail_service">
        <div class="order_linked_servie_wrapper">
            <div class="service_left">
                {% if account_order_detail.admin_info.avatar == '' %}
                <span class="no_avatar">
                    {% include 'icon_order_linked_service' %}
                </span>
                {% else %}
                <span>
                    <img src="{{account_order_detail.admin_info.avatar}}" />
                </span>
                {% endif %}
            </div>
            <div class="service_right">
                <h4 class="service_name">{{account_order_detail.admin_info.name}} ({{ lang.checkout.link_services }})</h4>
                <div class="service_remark">{{account_order_detail.admin_info.contact_remark}}</div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- order-table -->
    <div class="order-table">
      <div class="order-table-header  {% if storeConfig.buyagain != '0' %}buy_again_warp{% endif %}">
        <span class="order-table-title">{{account_order_detail.total_price | money:account_order_detail.currency, true, false}}</span>
        <div class="order-table-header-btns">
          {%- assign storeConfigBuyagain = theme_config.global.store_config_buyagain | default: '1'  -%}
          {% if storeConfigBuyagain == "1" %}
          <a class="mo-btn secondary_btn buy_again" data-order-id="{{account_order_detail.id}}" href="javascript:;">{{lang.account.orders.buy_again}}</a>
          {%- endif -%}
        {% if account_order_detail.pay_button_show %}
        <a class="main_btn" href="{{account_order_detail.pay_url}}">{{lang.account.orders.pay_now}}</a>
        {% endif %}
       
        </div>

      </div>
      <div class="order-table-body">
        <div class="order-table-body-info">

            <dl>
                <dt>{{lang.account.orders_detail.shipping_method}}</dt>
                <dd>{{account_order_detail.shipping_zone_plan_name | default:'-'}}</dd>
            </dl>

            <dl>
                <dt>{{lang.account.orders_detail.payment_method}}</dt>
                <dd>{{account_order_detail.payment_method | default:'-' }}</dd>
            </dl>
            {%- if account_order_detail.refund_status != 100 -%}
              <dl>
                <dt>{{lang.order.refund_status }}</dt>
                {% if  account_order_detail.refund_status  == 200 %}
                  <dd>{{lang.order.order_partially_refunded}}</dd>
                {% endif %}
                {% if account_order_detail.refund_status  == 300 %}
                  <dd>{{lang.order.order_refunded}}</dd>
                {% endif %}
              </dl>
            {%- endif -%}
            {% unless isTemplate %}
            {% if account_order_detail.shipping_address %}
            <dl>
                <dt>{{lang.account.orders_detail.shipping_address}}</dt>
                <dd>{{account_order_detail.shipping_address.first_name}} {{account_order_detail.shipping_address.last_name}}</dd>
                {% if account_order_detail.shipping_address.company %}<dd>{{account_order_detail.shipping_address.company}}</dd>{% endif %}
                {% if account_order_detail.shipping_address.address1 %}<dd>{{account_order_detail.shipping_address.address1}}</dd>{% endif %}
                {% if account_order_detail.shipping_address.address2 %}<dd>{{account_order_detail.shipping_address.address2}}</dd>{% endif %}
                <dd>
                  {% if account_order_detail.shipping_address.area %}{{account_order_detail.shipping_address.area}}&nbsp;{% endif %}
                  {{account_order_detail.shipping_address.city}}&nbsp;
                  {{account_order_detail.shipping_address.province}}&nbsp;
                  {{account_order_detail.shipping_address.zip}}
                </dd>
                {% if account_order_detail.shipping_address.country_name %}<dd>{{account_order_detail.shipping_address.country_name}}</dd>{% endif %}
                {% if account_order_detail.shipping_address.phone %}<dd>{%- if account_order_detail.shipping_address.tel_area_code -%}+{{ account_order_detail.shipping_address.tel_area_code  | telAreaCodeShow }}&nbsp;{%- endif -%}{{account_order_detail.shipping_address.phone}}</dd>{% endif %}
                
            </dl>
            {% endif %}
            
            {% if account_order_detail.bill_address %}
            {% assign bill_address = account_order_detail.bill_address  %}
            {% else %}
            {% assign bill_address = account_order_detail.shipping_address  %}
            {% endif %}
            <dl>
                <dt>{{lang.account.orders_detail.billing_address}}</dt>
                <dd>{{bill_address.first_name}} {{bill_address.last_name}}</dd>
                {% if bill_address.company %}<dd>{{bill_address.company}}</dd>{% endif %}
                {% if bill_address.address1 %}<dd>{{bill_address.address1}}</dd>{% endif %}
                {% if bill_address.address2 %}<dd>{{bill_address.address2}}</dd>{% endif %}
                <dd>{% if bill_address.area %}{{bill_address.area}}&nbsp;{% endif %}{{bill_address.city}}&nbsp;{{bill_address.province}}&nbsp;{{bill_address.zip}}</dd>
                {% if bill_address.country_name %}<dd>{{bill_address.country_name}}</dd>{% endif %}
                {% if bill_address.phone %}<dd>{%- if bill_address.tel_area_code -%}+{{ bill_address.tel_area_code  | telAreaCodeShow }}&nbsp;{%- endif -%}{{bill_address.phone}}</dd>{% endif %}
                
            </dl>

            {%- if account_order_detail.additional_info -%}
            <dl>
              <dt>{{lang.checkout.additional_information}}</dt>
              {% for info in account_order_detail.additional_info %}

                {% for option in info.options %}
                {%- if option.values and option.title -%}
                <dd>{{option.title}} : {{option.values}}</dd>
                {%- endif -%}
                {% endfor %}
                
              {% endfor %}
            </dl>
            {%- endif -%}

            {%- if account_order_detail.note -%}
            <dl>
              <dt>{{lang.account.orders_detail.note}}</dt>
              <dd>{{account_order_detail.note | default:'-' }}</dd>
            </dl>
            {%- endif -%}
            {% endunless %}

           

        </div>
        <div class="plugin-orderdetail-product_top"></div>
        {% if account_order_detail.logistics %}
        <div class="tracking-warp">
          <div class="tracking-header">{{lang.account.orders_detail.tracking}}</div>
          {% for logistic in account_order_detail.logistics %}
          <div class="tracking-item">
            <div class="tracking-item-header">
              <div class="tracking-item-title">{{logistic.tracking_company}} : {{logistic.tracking_number}}</div>
              {% if logistic.part_fulfillment.size > 0 %}
              <div class="tracking-item-delivery" data-index="{{forloop.index0 }}">{{lang.checkout.associated_goods | default :'associated_goods'}}</div>
              {% endif %}
            </div>
            {% if logistic.note %} <div class="tracking-item-des">{{logistic.note}}</div>{% endif %}
            <div class="tracking-item-data" style="display: none;" data-id='{{logistic.id}}'></div>
          </div>
          {% endfor %}
        </div>
        {% endif logistics %}
        {% if account_order_detail.refundRecords.size %}
        <div class="tracking-warp">
          <div class="tracking-header">{{lang.order.refund_price | default:"refund"}}</div>
          {% for refund in account_order_detail.refundRecords %}
          <div class="refund-item">
            <div class="refund-item-header" >
              <div class="refund-item-title">{{lang.order.refund_transaction_no}} : {{refund.transaction_no}}</div>
              <div class="refund-item-delivery" style="display: flex;justify-content: space-between;" data-index="{{forloop.index0 }}">
                <div class="refund-item-title">
                  {% unless storeConfig.email_refunds_price_show == 2 %}
                  {{lang.order.refund_price }}: {{refund.price | money:account_order_detail.currency, true, false}}
                  {% endunless %}
                </div>
                {% if refund.products.size > 0 %}
                <div class="refund-item-delivery-btn" data-index="{{forloop.index0 }}">{{lang.order.items_refunded | default :'Items refunded'}}</div>
                {% endif %}
              </div>
            </div>
            {% if refund.customer_note %} <div class="refund-item-des">{{refund.customer_note}}</div>{% endif %}
          </div>
          {% endfor %}
        </div>
        {% endif %}

        <div class="order-product-header mo-row">
          <div class="mo-col-6">{{lang.account.orders_detail.googs}}</div>
          <div class="mo-col-2">{{lang.account.orders_detail.price}}</div>
          <div class="mo-col-2">{{lang.account.orders_detail.quantity}}</div>
          <div class="mo-col-2">{{lang.account.orders_detail.subtotal}}</div>
        </div>
        <div class="order-table-body-product">
          {% for product in account_order_detail.products %}

          <div class="mo-row order-product-item">
            <div class="mo-col-6">
              <div class="order-card-info">
                <a class="order-card-info-picture" style="position:relative"  href="/products/detail/{{ product.product_id }}?data_from={{data_from}}">
                  <img  data-src="{{ product.src }}" src="{{ 'empty_loading.png' | public_asset_abs_url }}" class="order-card-info-picture-image" alt="{{product.product_title}}" />
				  							{% if product.log_src %}
													<img src="{{product.log_src}}" style="position: absolute;bottom: 0;right: 0;background-color: #e8e8e8;width: 16px;height: 16px;border-radius: 50%;">
												{% endif %}
                </a>
                <div class="order-card-info-detail">
                  <a class="order-card-info-title" style="font-weight:bold;" href="/products/detail/{{ product.product_id }}?data_from={{data_from}}">{{product.product_title}}</a>
                  
                  {% include 'product_sku_spu_show', className:"order-card-info-sku",style:"color: var(--color-main);",spu:product.spu,sku:product.sku %}

                  {% if product.sku_value %}
                  <div class="order-card-info-sku">{{product.sku_value}}</div>
                  {% endif %}
                  {% include 'product_custom_option', customOption:product.property %}
                  <!-- <div class="order-card-info-price">
                    <span>{{product.price | money:account_order_detail.currency, true, false }}</span>
                    <span>x</span>
                    <span>{{product.quantity}}</span>
                    <span>=</span>
                    <span>{{product.price | times:product.quantity | money:account_order_detail.currency, true, false }}</span>
                  </div> -->
                  
                </div>
              </div>
            </div>
            <div class="mo-col-2">
              <span>{{product.price | money:account_order_detail.currency, true, false}}</span>
            </div>
            <div class="mo-col-2">
              <span>{{product.quantity}}</span>
            </div>
            <div class="mo-col-2">
              <span>{{product.price | times:product.quantity  | money:account_order_detail.currency, true, false}}</span>
            </div>
          </div>
          {% endfor %}


          <!-- <div class="order-product-item order-card-info">
                      <div class="order-card-info-picture">
                          <img src="" class="order-card-info-picture-image" alt="" />
                      </div>
                      <div class="order-card-info-detail">
                          <div class="order-card-info-title">Army Green Cross Front Crop Top and Pocket Pant Set</div>
                          <div class="order-card-info-sku">Style: 8</div>
                          <div class="order-card-info-price">
                              <span>34.15</span>
                              <span>USD</span>
                              <span>X2</span>
                          </div>
                      </div>
                  </div> -->
        </div>

        <div class="mo-table-footer">
          <div class="pay-cell">
            <span class="pay-cell-labe">{{ lang.checkout.subtotal }}</span>
            <span class="pay-cell-value">{{account_order_detail.current_subtotal_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% if account_order_detail.current_coupon_price != 0 %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{ lang.checkout.coupon_discount }}</span>
            <span class="pay-cell-value">{{account_order_detail.current_coupon_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}
          {% if account_order_detail.current_promotion_price != 0 %}

          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.checkout.promotion_discount}}</span>
            <span class="pay-cell-value">{{account_order_detail.current_promotion_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}

          
          {% comment %} {% if account_order_detail.coupon_code %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.account.orders_detail.discount_code}}</span>
            <span class="pay-cell-value">{{account_order_detail.coupon_code}}</span>
          </div>
          {% endif %} {% endcomment %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.checkout.shipping_price}}</span>
            <span class="pay-cell-value">{{account_order_detail.current_shipping_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% if account_order_detail.current_insurance_price != 0 %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.checkout.insurance}}</span>
            <span class="pay-cell-value">{{account_order_detail.current_insurance_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}
          {% if account_order_detail.current_payment_price != 0 %}
            <div class="pay-cell">
              <span class="pay-cell-labe">{{lang.checkout.payment_price}}</span>
              <span class="pay-cell-value">{{account_order_detail.current_payment_price | money:account_order_detail.currency, true, false}}</span>
            </div> 
          {% endif %}
          {% if account_order_detail.current_tax_price != 0 %}
          <div class="pay-cell">
            <span class="pay-cell-labe">{{lang.checkout.tax}}</span>
            <span class="pay-cell-value">{{account_order_detail.current_tax_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}

          {% if account_order_detail.current_tip_price != 0 %}
          <div class="pay-cell">
            <span class="pay-cell-labe">
              {% if tip_setting %}
              {{ tip_setting.param.title }}
              {% else %}
              {{ lang.checkout.tip }}
              {% endif %}
            </span>
            <span class="pay-cell-value">{{account_order_detail.current_tip_price | money:account_order_detail.currency, true, false}}</span>
          </div>
          {% endif %}
          <div class="pay-cell pay-cell-total">
            <span class="pay-cell-labe">{{lang.checkout.total_price}}</span>
            <span class="pay-cell-value">{{account_order_detail.total_price | money:account_order_detail.currency, true, false}}</span>
          </div>

          {% unless storeConfig.email_refunds_price_show == 2 %}
            {% if account_order_detail.refund_price != 0 %}
              <div class="pay-cell">
                <span class="pay-cell-labe">{{lang.order.refund_price}}</span>
                <span class="pay-cell-value">{{account_order_detail.refund_price | money:account_order_detail.currency, true, false}}</span>
              </div>
            {% endif %}
          {% endunless %}
        

        </div>
      </div>
    </div>
    <div class="plugin-container-footer"></div>


    



  <div class="back-box">
    <a href="{% if isTemplate %}javascript:history.go(-1);{% else %}/account/orders{% endif %}">
      <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
      <span>{{ lang.account.orders_detail.back }}</span>
    </a>
  </div>
</div>


<script id="delivery-product-popup" type="text/x-template">
{% raw %}
<div class="delivery-product-popup">
  <div class="delivery-product-header">
    <div>{{title}}</div>
    <svg class="cart-header-claer popup-claer" class="icon" height="20" p-id="3072" t="1634191042040" version="1.1" viewbox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
          <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#333" p-id="3073"></path>
    </svg>
  </div>
  <div class="delivery-product-box">
    {%- for item in list -%}
    <div class="delivery-product-item">
      <a href="/products/detail/{{ item.product_id }}?data_from={{data_from}}" class="delivery-product-item-img" >
      <img src="{{item.src}}" >
      </a>
      <div class="delivery-product-item-content">
        <a href="/products/detail/{{ item.product_id }}?data_from={{data_from}}" class="delivery-product-title">{{item.product_title}}</a>

        {% if storeConfig.sku_spu_set == "4" %}
          {% elsif storeConfig.sku_spu_set == "2" %}
            <div class="delivery-product-sku">{{lang.account.orders_detail.spu}}:&nbsp;{{item.spu | default:"-" }}</div>
          {% elsif storeConfig.sku_spu_set == "3" %}
            <div class="delivery-product-sku">{{lang.account.orders_detail.sku}}:&nbsp;{{item.sku | default:"-" }}</div>
          {% elsif storeConfig.sku_spu_set == "1" %}
            <div class="delivery-product-sku">{{lang.account.orders_detail.spu}}:&nbsp;{{item.spu | default:"-" }},&nbsp;{{lang.account.orders_detail.sku}}:&nbsp;{{item.sku | default:"-" }}</div>
          {% else %}
        {% endif %}


        {% if item.sku_value %}
            <div class="delivery-product-sku">{% if item.sku_value %}{{item.sku_value}}{% endif %}</div>
        {% endif %}
        <div class="delivery-product-sku">{{lang.cart.list.quantity}}:{{item.quantity}}</div>
      </div>
    </div>
    {%- endfor -%}
  </div>
</div>
{% endraw %}
</script> 

<script type="text/javascript">
  (function(){
    var account_order_detail = {{ account_order_detail | json }}

    $(".tracking-item-delivery").click(function(){
      var index = $(this).data("index");
      var part_product = account_order_detail.logistics[index].part_fulfillment;
      if(part_product && part_product.length){
      const popupLayer = moi.popup();
      engine.parseAndRender($("#delivery-product-popup").html(), {
          list: part_product,
          data_from:"{{data_from}}",
          storeConfig:storeConfig,
          title:"{{lang.checkout.associated_goods}}",
          lang: lang
      }).then(function (html) {
        popupLayer.addContent(html);
      })
      }
      
    })


    $(".refund-item-delivery-btn").click(function(){
      var index = $(this).data("index");
      var products = account_order_detail.refundRecords[index].products;
      if(products && products.length){
      const popupLayer = moi.popup();
      engine.parseAndRender($("#delivery-product-popup").html(), {
          list: products,
          data_from:"{{data_from}}",
          title:"{{lang.order.items_refunded}}",
          storeConfig:storeConfig,
          lang: lang
      }).then(function (html) {
        popupLayer.addContent(html);
      })
      }
      
    })


     moi.setPageStorage('order_detail', {{account_order_detail | json}});
  $('.order-header-cancel').click(function () {
    const id = $(this).data('id');
    moi.confirm({
      title: `{{lang.account.orders.cancel_text}}` ,
      ok: function () {
        moi.ajax({
          url: '/account/orders/' + id,
          type: "put",
          success: function (data) {
            location.reload();
          }
        })
      }
    })
  }) 
      $(".buy_again").click(function(){
      const load = moi.nodeShowLoading(this);
      const orderId = $(this).data("order-id");

      moi.ajax({
                url: "/account/buyagain",
                type: "post",
                data: JSON.stringify({id:orderId}),
                complete: function () {
                    load.close();
                },
                success: function (data) {
                    if (!data.code) {
                      if(data.data){
                          return location.href = '/cart'
                      }
                    }else{
                      return  moi.alert({ title: data.msg });
                    }
                    
                }
       });
    }) 
  })()
</script> 